<template>
  <div>
    <div catchtap='hideFlag'>
      <div class="teacherSun">
        <i class="iconfont icon-fanhui fanhui" @click="goBack"></i>阳光家教
      </div>
      <div id='chat-ref' class="chat-content-wrapper ">
        <div v-for="(item,index) in chatContent">
          <div class='chatTime' v-if="item['value']['time']">{{item['value']['time']}}</div>
          <div class='self-wrapper' v-if='item["value"]["uid"]==user.uid&&item["value"]["msg"]==1'>
            <img :src='user.avatarUrl' class='self-avatar'/>
            <div class='self-text-wrapper'>
              <div class='self-text'>{{item['value']['message']}}</div>
            </div>
            <div class='clr'></div>
          </div>
          <div class='self-wrapper' v-if='item["value"]["image"]==1&&item["value"]["uid"]==user.uid'>
            <img :src='user.avatarUrl' class='self-avatar'/>
            <div class='self-img-wrapper'>
              <img class='chat-img' :src='item["value"]["url"]'/>
            </div>
            <div class='clr'></div>
          </div>

          <div class='other-wrapper' v-if='item["value"]["sid"]==sid&&item["value"]["msg"]==1'>
            <div class='other-text-wrapper'>
              <div class='self-text'>{{item['value']['message']}}</div>
            </div>
            <img :src='item["value"]["avatar"]' class='other-avatar'/>
          </div>
          <div class='other-wrapper' v-if='item["value"]["sid"]==sid&&item["value"]["image"]==1'>
            <div class='other-image-wrapper'>
              <img class='chat-img' :src='item["value"]["url"]'/>
            </div>
            <img :src='item["value"]["avatar"]' class='other-avatar'/>
          </div>
        </div>
      </div>
    </div>
    <div class="send-wrapper">
      <i class="iconfont icon-addition"></i>

      <div class="input-content">
        <input ref="chatMessage" @input="messageChange" class="input-message" placeholder="请输入内容" style="font-size:20px;border:none; width: 200px;">
      </div>
      <span class="send-btn" :style="isNull?{color:'grey'}:{color:'#07c159'}" @click="sendMessage">发送</span>
    </div>
  </div>
</template>

<script>
  import {XInput, XButton, ToastPlugin, Group, LoadingPlugin} from 'vux'
  import {login} from "@/api/user"
  import {getShare, getComment, addComment, addPraise, getDiscussionById} from "@/api/share"
  import {getData} from "@/utils/auth"
  import Vue from "vue"

  Vue.use(LoadingPlugin)
  export default {
    components: {
      XInput, XButton, Group
    },
    data() {
      return {
        isNull:true,
        sid: 0,
        chatContent: [{
          value: {
            time: "03-26 17:42",
            sid: -1,
          }
        },
          {
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: "您好",
              msg: 1,
              sid: -1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          },
          {
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: "请问怎么邀请老师上门辅导",
              msg: 1,
              sid: -1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          },
          {
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: "很简单",
              msg: 1,
              sid: 1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          },
          {
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: "您只需要在首页点击定制，填写相关信息即可",
              msg: 1,
              sid: 1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          },
          {
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: "就会有专业的辅导老师联系您了",
              msg: 1,
              sid: 1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          }
        ],
        user: {
          avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
          nickName: "超人",
          uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
        }
      }
    },
    created() {
      let id = this.$route.query.id
      this.sid = id

    },
    methods: {
      showPaper() {
        this.paperShow = true
        this.videoShow = false
      },
      goBack() {
        this.$router.go(-1)
      },
      messageChange(e){
        let value =e.target.value
        if(value){
          this.isNull = false
          return
        }
        
        this.isNull = true
      },
      sendMessage(e){
        let message = this.$refs.chatMessage
        this.chatContent.push({
            value: {
              avatar: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0gXWnxEwHMTqwNfwv3tRLbG5f5sQTlTa7psIm3b97UN6JSh6LXJGfcd7MmNwuPfWn3qxJaXdJIg/0",
              message: message.value,
              msg: 1,
              sid: -1,
              uid: "8262306a2f77fd6c1725dd7d5698c08e7ee43a62"
            }
          })
       message.value = ''
      }
    }
  }

</script>

<style>
  body {
  }

  .icon-addition {
    position: relative;
    top: 3px;
    font-size: 34px;
    line-height: 34px;
    margin-right: 6px;
    display: inline-block;
    color: gray;
  }

  .send-btn {
    position: absolute;
    top:12px;
    right: 40px;
    font-size: 18px;
    color: gray;
  }

  .input-message{
    outline: 0 none;
  }

  .icon-zhayan {
    position: relative;
    display: inline-block;
    line-height: 28px;
    font-size: 28px;
    display: inline-block;
    color: gray;
    margin-right: 10px;
  }

  .send-wrapper {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background: white;
  }

  .input-content {
    position: absolute;
    top: 16px;
    display: inline-block;
    font-size: 16px;
  }

  .chat-wrapper {
    position: fixed;
    float: left;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
  }

  .fanhui {
    position: relative;
    float: left;
    margin-left: 10px;
    color: #07c159;
  }

  .teacherSun {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 700;
    background: white;
    z-index: 999999;
  }

  .chat-container {
    position: relative;
    display: flex;
    background: #eee;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
  }

  .chat-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 55px;
    margin-top: 80px;
    overflow-y: auto;
  }

  .hidden-conten {
    position: relative;
    margin-left: -10000px;
    z-index: -10
  }

  .chat-container .input-container {
    flex: auto;
    background: white;
    border-radius: 3px;
    height: 35px;
  }

  .chat-container::after {
    position: absolute;
    width: 100%;
    content: "";
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }

  .chat-container .input-container input {
    padding: 0 5px;
    line-height: 100%;
    height: 100%;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1) inset;
  }

  .chat-container .submit-container {
    position: relative;
    text-align: center;
    height: 35px;
    line-height: 35px;
  }

  .submit-container .submit-handle {
    position: relative;
    width: 70px;
    font-size: 15px;
    margin: 0 0 0 7px;
    background: #ff8c00;
    color: white;
    border-radius: 3px;
  }

  .self-wrapper {
    margin: 20px 10px 30px 10px;
    position: relative;
  }

  .self-order-wrapper {
    margin: 20px 10px 30px 10px;
    position: relative;
  }

  .self-text-wrapper {
    position: relative;
    float: right;
    margin-right: 17px;
    background: #07c159;
    max-width: 50%;
    padding: 10px;
    font-size: 15px;
    border-radius: 8px;
    line-height: 15px;
    border: 1px solid rgba(0, 255, 0, 0.5);
  }

  .self-avatar {
    position: relative;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .clr {
    position: relative;
    width: 0;
    height: 0;
    clear: both;
  }

  .self-text-wrapper::after {
    position: absolute;
    content: "";
    right: -3px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: #07c159;
    transform: rotate(45deg);
  }

  .self-img-wrapper {
    position: relative;
    float: right;
    margin-right: 17px;
    max-width: 50%;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  }

  .self-order-text-wrapper {
    position: relative;
    float: right;
    margin-right: 17px;
    background: white;
    max-width: 50%;
    padding: 8px;
    font-size: 15px;
    border-radius: 5px;
    border: 1px solid #07c159;
  }

  .self-order-text-wrapper::after {
    position: absolute;
    content: "";
    right: -4px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
  }

  .other-order-text-wrapper::after {
    position: absolute;
    content: "";
    left: -3px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
  }

  .order-item-wrapper:last-child {
    border: none;
  }

  .order-title-wrapper {
    position: relative;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .self-text {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .other-wrapper {
    margin: 20px 10px 30px 10px;
    position: relative;
  }

  .other-avatar {
    position: relative;
    float: left;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .other-order-text-wrapper {
    position: relative;
    display: inline-block;
    background: white;
    max-width: 50%;
    padding: 8px;
    font-size: 7px;
    border-radius: 3px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  }

  .other-text-wrapper {
    display: inline-block;
    position: relative;
    background: white;
    max-width: 50%;
    padding: 8px;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  }

  .other-text-wrapper::after {
    position: absolute;
    content: "";
    left: -3px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
  }

  .other-image-wrapper {
    display: inline-block;
    position: relative;
    background: white;
    max-width: 50%;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  }

  .other-image-wrapper::after {
    position: absolute;
    content: "";
    left: -4px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: -1;
  }

  .self-text {
    font-size: 17px;
    line-height: 25px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .chatTime {
    position: relative;
    font-size: 13px;
    text-align: center;
    line-height: 16px;
  }

  .media-container {
    position: relative;
    margin: 0 7px;
    background: #eee;
  }

  .media-container .media-item {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid gray;
    text-align: center;
    line-height: 50px;
    margin: 10px 13px;
    background: white;
  }

  .icon-zhangdan:before {
    position: relative;
    content: "\e89e";
    font-family: "iconfont" !important;
    font-size: 35px;
    font-style: bold;
    color: gray;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-picture_fill:before {
    position: relative;
    content: "\e716";
    font-family: "iconfont" !important;
    font-size: 35px;
    font-style: bold;
    color: gray;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .media-item-text {
    position: relative;
    display: inline-block;
    font-size: 12px;
    color: gray;
    text-align: center;
    top: -15px;
  }

  .order-mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    background: rgba(7, 17, 27, 0.1);
  }

  .order-list-wrapper {
    position: fixed;
    width: 100%;
    height: 325px;
    display: flex;
    bottom: -100%;
    z-index: 110000;
    background: white;
    -webkit-transition: all 0.3s ease;
    overflow-y: scroll;
    padding-top: 33px;
  }

  .order-list-wrapper.show-order {
    bottom: 0;
  }

  .order-header-title {
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 14px;
    margin-left: 8px;
    line-height: 20px;
    border-bottom: 1px dashed #eee;
    padding: 5px 0;
  }

  .order-item-wrapper {
    position: relative;
    border-bottom: 1px dashed #eee;
  }

  .chat-order-icon {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 8px 4px 5px 5px;
    vertical-align: top;
  }

  .chat-order-title {
    font-size: 13px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
  }

  .chat-img {
    position: relative;
    display: block;
    max-width: 100px;
  }
</style>
